<template>
  <div class="wrapper">
    <public :title="str" :changeColor="changeColor" class="nb"></public>
    <div class="heightbox"></div>
    <van-tabs @click="ddd" v-model="activeName">
      <van-tab
        v-for="(item,idx) in filterCategoryArr"
        :title="item.name "
        :name="item.id"
        :key="item.id"
      >
        <div class="box">
          <p>{{strArr[idx].name}}</p>
          <p>{{strArr[idx].content}}</p>
          <p></p>
        </div>
        <product-show v-for="goods in item.goodsArr" :key="goods.id" :obj="goods"></product-show>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Public from "@/components/public/Public";
import { GetSearchProduct } from "@/request/api";
import ProductShow from "@/components/ProductShow";
export default {
  components: {
    ProductShow,
    Public
  },
  data() {
    return {
      activeName: 0,
      filterCategoryArr: [],
      str: "",
      changeColor: "",
      strArr: [
        { name: "餐厨", content: "厨房" },
        { name: "居家", content: "回家，放松身心" },
        { name: "配件", content: "配角，亦是主角" },
        { name: "服装", content: "贴身的，要亲肤" },
        { name: "洗护", content: "亲肤之物，严选天然" },
        { name: "婴童", content: "爱，从心开始" },
        { name: "杂货", content: "解忧，每个烦恼" },
        { name: "饮食", content: "好吃，高颜值美食" },
        { name: "志趣", content: "爱好，点缀生活" }
      ]
    };
  },
  methods: {
    ddd(val, name) {
      console.log(val, name);
      var colorstr = "#";
      var arr = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f"
      ];
      for (var i = 0; i < 6; i++) {
        var num = parseInt(Math.random() * 16);
        colorstr += arr[num];
      }
      // console.log(colorstr);
      this.changeColor = colorstr;
      // console.log(this.changeColor);

      var opop = val + "";
      this.str = name;
      GetSearchProduct({
        brandId: JSON.stringify(opop),
        page: 1,
        size: 100,
        categoryId: opop
      }).then(res => {
        console.log(res);
        this.filterCategoryArr = res.data.filterCategory.filter((el, idx) => {
          return idx > 0;
        });
        console.log(res.data);
        this.filterCategoryArr.forEach(el => {
          // console.log(this);
          if (el.id == opop) {
            el.goodsArr = res.data.goodsList;
          }
        });
      });
    }
  },
  //
  created() {
    this.str = this.$route.params.title;
    this.activeName = parseInt(this.$route.params.id);
    // console.log(this.activeName);
    console.log(this.$route.params.title);

    GetSearchProduct({
      brandId: JSON.stringify(this.$route.params.id),
      page: 1,
      size: 100,
      categoryId: this.$route.params.id
    }).then(res => {
      // console.log(res);
      this.filterCategoryArr = res.data.filterCategory.filter((el, idx) => {
        return idx > 0;
      });
      this.filterCategoryArr.forEach(el => {
        if (el.id == this.$route.params.id) {
          el.goodsArr = res.data.goodsList;
        }
      });
      console.log(res.data);
    });
  }
};
</script> 

<style lang="less" scoped>
.wrapper {
  background-color: #efefef;
  .product-show {
    width: 49%;
  }
  .van-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.nb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 1;
  border-bottom: 1px solid #000;
}
.heightbox {
  height: 46px;
}
.box {
  width: 100%;
  background-color: #fafafa;
  text-align: center;
  p {
    margin: 0;
    margin-top: 10px;
  }
  p:nth-of-type(2) {
    color: #666;
    margin-bottom: 20px;
  }
}
.van-tab__pane {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>